<template>
  <div>
    <div id="title">
      <panle title='网站设置管理' content="网站设置管理列表"></panle>
    </div>
    <div id="search" class="pt20">
      <Search @setSearchForm="setSearchForm"></Search>
    </div>
    <div class="searchbar">
      <el-button icon="el-icon-refresh-right" size="mini" @click="init()">刷新</el-button>
      <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="system:website:button-add" type="primary"
                   label="添加"></pers-button>
      <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()"
                   perms="system:website:button-delete"
                   label="删除"></pers-button>
    </div>

    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id"
              :header-cell-style="{background:'#f9f9f9'}" stripe default-expand-all v-loading="loading"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="55"></el-table-column>
      <el-table-column prop="title" label="字段"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="value" label="值">
        <template slot-scope="scope">
          <el-image v-if="scope.row.type == 2" :src="scope.row.value" fit="fill"
                    style="width: 60px;height: 60px;"></el-image>
          <div v-else>{{ scope.row.value }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column prop="updated_at" label="更新时间"></el-table-column>
      <el-table-column prop="uid" label="操作">
        <template slot-scope="scope">
          <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="system:website:button-edit"
                      @click="edit(scope.row)"></PersButton>
          <PersButton type="text" size="mini" icon="el-icon-delete" perms="system:website:button-delete" label="删除"
                      @click="del(scope.row)"></PersButton>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="page" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog v-dialogDrag :visible.sync="dialogOpen" width="600px" append-to-body
               :title="dialogStatus === 'create' ? '新增' : '修改'">
      <create
          v-if="dialogOpen"
          @childByDialogVisible="childByDialogVisible"
          :dialogStatus="dialogStatus"
          :rowData="dataParameter"
      ></create>
    </el-dialog>
  </div>
</template>

<script>
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {listWebsite, deleteWebsite} from '@/api/system/website';
import Create from "./create";
import Search from "./search";

export default {
  components: {
    Create,
    Panle,
    PersButton,
    Search
  },
  data() {
    return {
      loading: false,
      pageSize: 10, //一页显示多少条
      page: 1,
      total: 0, //总页数
      tableData: [],
      searchForm: {},
      multipleSelection: [],
      dialogOpen: false,
      dialogStatus: 'create',
      dataParameter: {},
    }
  },
  created() {
    this.init();
  },
  filters: {},
  methods: {

    init: function () {
      this.loading = true;
      let param = {
        "pageSize": this.pageSize,
        "page": this.page,
      }
      listWebsite(param).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        } else {
          this.msgError(res.msg);
        }
      })
    },
    setSearchForm(searchForm) {
      this.searchForm = searchForm;
      this.init();
    },
    serach: function () {
      this.init();
    },
    handleSizeChange: function (e) {
      this.pageSize = e;
      this.init();
    },
    handleCurrentChange: function (e) {
      this.page = e;
      this.init();
    },
    handleSelectionChange: function (e) {
      let selectChang = []
      for (let item of e) {
        selectChang.push(item.id)
      }
      this.multipleSelection = selectChang;
    },
    add() {
      this.dialogOpen = true
      this.dialogStatus = 'create'
    },
    edit(row) {
      this.dialogOpen = true
      this.dialogStatus = 'update'
      this.dataParameter = row;
    },
    del: function (data) {
      this.$confirm('确定删除【' + data.title + '】', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWebsite(data).then((res) => {
          if (res.code === 200) {
            this.msgSuccess(res.msg);
            this.init();
          } else {
            this.msgError(res.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delAll() {
      if (this.multipleSelection.length < 1) {
        this.msgError("请选择数据");
      } else {
        let ids = this.multipleSelection.join(",");
        this.$confirm('确定删除【' + ids + '】', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.multipleSelection.forEach((item) => {
            deleteWebsite({id: item}).then((res) => {
              if (res.code === 200) {
                this.msgSuccess(res.msg);
                this.init();
              } else {
                this.msgError(res.msg);
              }
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    //对话框点击确定后的回调事件
    childByDialogVisible(childValue, isUpdate) {
      this.dialogOpen = childValue
      this.dataParameter = ""
      if (isUpdate) {
        this.init()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  .el-form-item {
    margin-bottom: 0;
  }
}

.el-tree {
  max-height: 200px;
  overflow: auto;
  background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
  font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
  float: left;
  width: 100px;
}

.el-checkbox__label {
  font-size: 12px !important;
}

.uploadcol {
  display: flex;
  flex-flow: column;
  width: 100px;
}

.uploadborder {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  /* cursor: pointer;
      position: relative;
      overflow: hidden; */
  width: 100px;
  height: 100px;
}
</style>
